<script lang="ts">
  import { FollowDto, getWathUser } from '@/api/user';
  import { ROUTER_PATHS, useRouter } from '@/constants/router';

  import { defineComponent, ref } from '@vue/composition-api';

  export default defineComponent({
    setup() {
      const friends = ref<FollowDto[]>([]);
      const router = useRouter();
      getWathUser().then((res) => {
        friends.value = res.data;
      });

      function enterChat(id: number) {
        router.navigateTo({
          url: ROUTER_PATHS.PERSONAL,
          params: {
            id
          }
        });
      }

      return {
        friends,
        enterChat
      };
    }
  });
</script>

<template>
  <div class="contacts">
    <div class="contacts-container">
      <!-- <div class="user-list">
        <div class="user-list-item" v-for="(group, uuid) in groups" :key="uuid" @click="enterChat(group.uuid, 'group')">
          <div class="user-item-avatar">
            <image :src="group.avatar" />
          </div>
          <div class="user-item-info">
            <span class="user-item-info__name">{{ group.name }}</span>
          </div>
        </div>
      </div> -->
      <u-empty v-if="friends.length === 0" text="暂无数据" mode="list"></u-empty>
      <view class="contacts-title" v-if="friends && friends.length !== 0">关注的人</view>
      <div class="user-list">
        <div
          class="user-list-item"
          v-for="(friend, index) in friends"
          :key="index"
          @click="enterChat(friend.targetUserId)"
        >
          <div class="user-item-avatar">
            <image :src="friend.targetUserInfo.avatarUrl"></image>
          </div>
          <div class="user-item-info">
            <span class="user-item-info__name">{{ friend.targetUserInfo.nickName }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .contacts {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .contacts .contacts-container {
    width: 100%;
    overflow: auto;
  }

  .contacts .user-list-item {
    height: 132rpx;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
  }
  .contacts .contacts-title {
    height: 80rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    color: #666666;
    background: #f3f4f7;
    text-indent: 44rpx;
  }

  .contacts .user-list {
    flex-grow: 1;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .contacts .user-item-avatar {
    width: 96rpx;
    height: 96rpx;
    margin-right: 32rpx;
    overflow: hidden;
    position: relative;
  }
  .contacts .user-item-avatar image {
    width: 100%;
    height: 100%;
    display: block;
  }
  .contacts .user-item-info {
    height: 130rpx;
    padding-right: 32rpx;
    line-height: 88rpx;
    flex-grow: 1;
    border-bottom: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .contacts .user-item-info__name {
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-style: normal;
    font-weight: bold;
    color: #262628;
  }
  .contacts .user-item-info__tips {
    height: 44rpx;
    width: 64rpx;
    border-radius: 24rpx;
    font-size: 26rpx;
    line-height: 44rpx;
    background: #d02129;
    color: #ffffff;
    font-family: Cabin;
    text-align: center;
  }
  .contacts .online-dot {
    position: absolute;
    width: 32rpx !important;
    height: 32rpx !important;
    right: 0;
    bottom: 0;
  }
</style>
